/**
月总结
20230320 新增
*/

<template>
  <div class="meterage-manage">
    <div class="model-title-css">
      <div>总体进度</div>
    </div>
    <div class="background_wrap">
      <div class="list_wrap">
        <div class="left-box WholeScroll">
          <el-tree class="Public-Tree-Class" :data="leftList" :props="defaultProps" ref='treeData' node-key="id" :highlight-current='true' :default-expanded-keys="defaultTreeKey" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="right-content">
          <div class="operate_wrap flex" style="margin-bottom: 15px">
            <div class="flex-center">
              <el-date-picker style="margin: 15px 0;" v-model="search.selectMonth" v-on:change="changeDate()" type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
              </el-date-picker>
            </div>
            <div class="flex-center change-input-color">
            </div>
          </div>
          <div class="chart-box">
            <div style="height: 100%;width: 35%;justify-content: space-between" class="public-flex-row">
              <div style="height: 100%;width: 50%;" id="chart-left" class="Chart" />
              <div class="left-text-box">
                <div style="height: 30%;" class="column-space">
                  <p class="title">总产值</p>
                  <p class="number">{{ dayPlan }}万元</p>
                </div>
                <div style="height: 30%;" class="column-space">
                  <p class="title">开累完成产值</p>
                  <p class="number">{{dayReal}}万元</p>
                </div>

              </div>
            </div>
            <div style="height: 100%;width: 63%;">
              <div class="top-text-content WholeScroll" style="height: 17%;">
                <p :class="chooseIndex == index?'chooseText':''" v-for="(item,index) in projectArr" :key="index" @click="chooseImageBreak(index)">{{item.name}}</p>
              </div>
              <div id="chart-right" style="height: 82%;width: 100%;"></div>
            </div>
          </div>
          <div class="scroll-table-array WholeScroll">
            <el-table ref="multipleTable" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" :data="list" row-key="imageId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" tooltip-effect="dark" :height="tableHeight" v-loading="isLoading" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px">
              <el-table-column prop="name" min-width="250" fixed="left" label="单项/单位/分部工程">
              </el-table-column>
              <el-table-column prop="unit" label="单位" fixed="left" width="80">
              </el-table-column>
              <el-table-column prop="allProduction" label="数量" width="100">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{ scope.row.allProduction }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="allRealProduction" label="累计完成量" width="150">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.allRealProduction}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="surplusSituationMoney" label="剩余工程量" width="150">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.allProduction&&scope.row.allRealProduction?scope.row.allProduction-scope.row.allRealProduction:''}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="surplusSituationMoney" label="完成百分比" width="120">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.allPer?scope.row.allPer+'%':''}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="comprehensiveOutput" label="总产值(万元)" width="120">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.comprehensiveOutput}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="allRealOutput" label="累计完成产值(万元)" width="150">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.allRealOutput}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="allMoneyPer" label="完成百分比" width="120">
                <template slot-scope="scope">
                  <div style="text-align: right;">{{scope.row.allMoneyPer?scope.row.allMoneyPer+'%':''}}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import * as echarts from 'echarts';
import projectSectionInfo from '@/api/buss/common'
import msgUtil from '@/utils/msgUtil'
import publicSearchData from '@/mixins/publicSearchData'
export default {
  mixins: [publicSearchData],
  name: `monthlysummary`,
  data() {
    return {
      isLoading: false,
      title: '总体进度',
      defaultTreeKey: [],
      leftList: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      processDialog: false,
      chooseMonth: [],

      newRowName: '',
      tabClickIndex: '',
      tabClickLabel: '',
      addsdId: '', //隧道的id
      //constructionUnitOptions:[], // 公司
      projectOptions: [], // 项目
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      year: '2023',
      showYearState: false,
      addRowDialog: false,

      hasAdd: false,


      nowLeftId: `${(new Date()).getMonth()}`,
      leftListIndex: (new Date()).getMonth() - 1,


      listOne: [{}],
      inputValue: '',
      imageProgressInfoListCopy: [],

      fileTitle: '文件',
      nowFileList: [],
      showFileDialog: false,
      companyTree: [],
      projectTree: [],
      sectionTree: [],
      rightOne: '',
      chooseIndex: '0',
      projectArr: ['单位工程1', '单位工程2', '单位工程3'],
      // 搜索参数
      search: {
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        chooseYear: '2023',
        chooseMonth: '',
        selectMonth: [],
        month: '1',
        sectionId: '',
        projectId: '',

      },
      // 列类型表
      list: [],
      dayPlan: 0,
      dayReal: 0,
      outPutPer: 0,
      dataArr: []
    }
  },
  watch: {
    leftList(val) {
      if (val.length == 0) {
        this.$set(this, 'listOne', [])
      }
    },
    listOne(val) {
      let index = 0
      let arr2 = []
      let deep = function(arr) {
        arr.forEach((item) => {
          item.index = index
          arr2.push(JSON.parse(JSON.stringify(item)))
          index++
          if (item.hasOwnProperty('children')) {
            deep(item.children)
          }
        })
      }
      deep(val)
      console.log('change')
      this.imageProgressInfoListCopy = JSON.parse(JSON.stringify(arr2))
    }
  },
  mounted() {
    this.initData()
    // this.$nextTick(()=>{
    //   this.rightOneBar()
    //   this.initBottomBar()
    // })
  },
  computed: {
    tableHeight: function() {
      return (window.innerHeight - 460) + 'px';
    }
  },
  methods: {
    initData() {
      projectSectionInfo.getLeftProjectTree().then(res => {
        if (res.code === 200) {
          this.$set(this, 'leftList', res.data)

          if (this.leftList.length > 0) {
            this.$nextTick(() => {
              if (this.$headerSearch) {
                if (this.changeHeaderProject) {
                  this.leftList.forEach((item, index) => {
                    if (item.id == this.changeHeaderProject && item.hasOwnProperty('children') && item.children.length > 0) {
                      this.defaultTreeKey.push(item.id)
                      this.$refs['treeData'].setCurrentKey(item.children[0].id);
                      this.handleNodeClick(item.children[0])
                    }
                  })
                } else {
                  this.defaultTreeKey.push(this.leftList[0].id)
                  this.$refs['treeData'].setCurrentKey(this.leftList[0].children[0].id);
                  this.handleNodeClick(this.leftList[0].children[0])
                }
              } else {
                this.defaultTreeKey.push(this.leftList[0].id)
                this.$refs['treeData'].setCurrentKey(this.leftList[0].children[0].id);
                this.handleNodeClick(this.leftList[0].children[0])
              }
            })
          } else {
            this.list = []
          }
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(() => {
        this.$messageError('获取项目标段树失败')
      })
    },

    chooseLeft(item, index) {
      (this.leftListIndex = index)
    },
    chooseProject(index) {
      this.chooseIndex = index
    },
    initBottomBar() {
      let that = this
      let chartDom = document.getElementById('chart-right')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          left: '8%',
          right: '0%',
          bottom: '13%',
          top: '20%',
          containLabel: false
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            let chooseArr = that.dataArr.filter(it => it.name == params[0].name)
            let unit = ''
            if (chooseArr[0].hasOwnProperty('unit')) {
              unit = chooseArr[0].unit
            }
            let html = ''
            html = `<span style="margin-left: 14px;">${params[0].axisValue}</span><br>` + params[0].marker + '计划   :  ' + chooseArr[0].planProduction + unit + '<br>' + params[1].marker + '实际   :  ' + chooseArr[0].realProduction + unit + '<br>' + '<span style="margin-left: 14px">占比  :  </span>' + chooseArr[0].realPrecent + '%'
            return html
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(108,128,151,0.3)',
            }
          },
          splitNumber: 5,
          name: '单位：% ',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'black',
              }
            },
            data: this.dataArr.map(it => it.name)
          },
          {
            type: 'category',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitArea: { show: false },
            splitLine: { show: false },
            data: this.dataArr.map(it => it.name)
          },
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(57,130,250,0.1)',
                // barBorderRadius:50,
                borderRadius: [8, 8, 0, 0]
              }
            },
            barGap: '0%',
            barCategoryGap: '50%',
            barWidth: 20,
            data: this.dataArr.map(it => it.planPrecent)
          },

          {
            name: '实际',
            type: 'bar',
            xAxisIndex: 1,

            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(57,130,250,1)',
                // barBorderRadius:50,
                borderRadius: [8, 8, 0, 0]
              }
            },
            barGap: '0%',
            barCategoryGap: '50%',
            barWidth: 20,
            data: this.dataArr.map(it => it.realPrecent)
          },
        ]
      }
      option && myChart.setOption(option)
    },
    rightOneBar(data) {
      let fundBar;
      if (this.rightOne) {
        fundBar = this.rightOne;
      } else {
        const ele = document.getElementById('chart-left')
        if (!ele) {
          return;
        }
        fundBar = echarts.init(ele);
        this.rightOne = fundBar;
      }
      fundBar.setOption({
        series: [
          {
            type: 'gauge',
            radius: '100%',
            center: ['50%', '50%'],
            startAngle: 230,
            endAngle: -50,
            min: 0,
            max: 100,
            splitNumber: 12,
            progress: {
              show: true,
              roundCap: true,
              width: `${this.$publicJs.nowSize(18)}`
            },
            itemStyle: {
              color: 'rgba(30, 112, 250, 1)'
            },
            axisLine: {
              lineStyle: {
                width: `${this.$publicJs.nowSize(20)}`,
                color: [[1, 'rgba(222,222,222, 1)']],
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 15
              }
            },

            pointer: {
              show: false
            },
            axisTick: {
              show: false,
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2
              }
            },
            splitLine: {
              show: false,
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: 'red'
              }
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: 'red',
              fontSize: 20

            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              height: '15%',
              borderRadius: 8,
              offsetCenter: ['0', '0'],
              fontSize: `${this.$publicJs.nowSize(28)}`,
              fontWeight: 'bolder',
              formatter: '{value}%',
              color: 'rgba(0,0,0,1)'
            },
            data: [
              {
                value: this.outPutPer
              }
            ]
          }
        ]
      });

    },
    handleNodeClick(val) {
      console.log(val)
      if (!val.hasOwnProperty('children')) {
        this.search.sectionId = val.id

        this.getOutputAll()
        this.getImageBeak().then(() => {
          this.chooseImageBreak(0)
        })
        this.getTableDataAll()

      }
    },
    changeDate() {
      this.getOutputAll()
      this.getImageBeak().then(() => {
        this.chooseImageBreak(0)
      })
      this.getTableDataAll()
    },
    bianpingFunction(array) {
      console.log(array, 'array')
      let bianpingArr = []
      let func = function(list) {
        let res = []
        res = list.concat(...list.map(item => {
          if (item.children instanceof Array && item.children.length > 0) {
            return func(item.children)
          }
          return null
        }).filter(o => o instanceof Array && o.length > 0))
        return res
      }
      bianpingArr = func(array)
      return bianpingArr
    },
    selectionRange() {
      this.$refs.datePicker.focus()
    },
    getImageBeak() {
      return this.$httpPost('buss/engineeringstatistics/getImageBeak', {
        sectionId: this.search.sectionId
      }).then((res) => {
        if (res.code == 200) {
          this.projectArr = res.data
          return new Promise(reslove => {
            reslove(res)
          })
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取单位工程失败")
      })
    },
    chooseImageBreak(index) {
      this.chooseIndex = index
      this.search.imageBreakId = this.projectArr[index].id
      return this.$httpPost('buss/engineeringstatistics/getProductionAll', this.search).then((res) => {
        if (res.code == 200) {
          this.$set(this, 'dataArr', res.data)
          this.dataArr.forEach((item, index) => {
            if (item.planProduction == 0) {
              //如果计划产值等于0
              item.planPrecent = 0
              if (item.realProduction == 0) {
                //如果真实产值等于0
                item.realPrecent = 0
              } else {
                //如果真实产值不等于0
                item.realPrecent = 100
              }
            } else {
              //如果计划产值不等于0
              item.planPrecent = 100
              if (item.realProduction == 0) {
                //如果真实产值等于0
                item.realPrecent = 0
              } else {
                //如果真实产值不等于0
                item.realPrecent = Number(((item.realProduction / item.planProduction) * 100).toFixed(2))
              }
            }
          })
          console.log(this.dataArr, 'dataArr')
          this.initBottomBar()
          return new Promise(reslove => {
            reslove(res)
          })
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取单位工程失败")
      })

    },
    getOutputAll() {
      return this.$httpPost('buss/engineeringstatistics/getOutputAll', this.search).then((res) => {
        if (res.code == 200) {
          this.dayPlan = res.data.planOutput
          this.dayReal = res.data.realOutput
          if (res.data.planOutput) {
            if (Number((res.data.realOutput / res.data.planOutput * 100).toFixed(2)) > 1000) {
              this.outPutPer = 1000
            } else {
              this.outPutPer = Number((res.data.realOutput / res.data.planOutput * 100).toFixed(2))
            }
          } else {
            this.outPutPer = 0
          }
          this.rightOneBar()
          return new Promise(reslove => {
            reslove(res)
          })
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目标段树失败")
      })
    },
    getTableDataAll() {
      this.isLoading = true
      this.$httpPost('buss/engineeringstatistics/getTableDataAll', this.search).then((res) => {
        if (res.code == 200) {
          this.list = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
        msgUtil.error2("获取单位工程失败")
      })
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
}

.list_wrap {
  margin-top: 20px;
  display: flex;
  padding: 10px;
  // height: calc(100vh - 215px);
  // height: 100%;
  .left-list {
    width: 150px;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.4);
    .tree-box {
      margin-top: 15px;
    }
    .text-class {
      cursor: pointer;
      font-size: 16px;
      color: #444;
      margin: 5px auto;
      text-align: center;
      padding: 10px 40px;
    }
    .activecss-left {
      background-color: #005fff;
      color: #fff !important;
    }
  }
  .right-content {
    width: calc(100% - 200px);
    padding: 0 15px;
    flex-grow: 1;
  }
  .chart-box {
    height: 200px;
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    .left-text-box {
      width: 35%;
      height: 100%;
      padding: 20px 0 20px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      .column-space {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .title {
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
      p {
        margin: 0;
      }
    }
  }
  .scroll-table-array {
    width: 100%;
    .engincontentNameTitleCss {
      font-size: 14px;
      font-weight: bold;
    }
    .engincontentNameChildCss {
      font-size: 14px;
      // font-weight: bold;
      padding-left: 20px;
    }
    .iconBox {
      i {
        cursor: pointer;
      }
    }
  }
}
.edit-box {
  display: flex;
  align-items: center;
}
.btnGroupAA {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 80px;
  padding: 0px;
  .btn-item {
    flex: 1;
    cursor: pointer;
  }
  // .el-button{
  //   padding: 7px;
  // }
}

.text-box {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e2e8ec;
  text-align: center;
  position: relative;
  .pickerTime {
    opacity: 0;
    position: absolute;
    left: 25%;
    top: -40%;
    z-index: -1;
  }
}
.background_wrap {
  padding: 8px !important;
}
.top-text-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 25px;
  max-width: 100%;
  overflow-x: auto;
  p {
    cursor: pointer;
    margin: 0 15px 0 0;
    font-size: 16px;
    white-space: nowrap;
  }
  .chooseText {
    color: #409eff;
  }
}
.left-box {
  min-width: 220px !important;
  max-width: 350px !important;
  max-height: calc(100vh - 200px);
  border-right: 1px #e2e8ec solid;
  overflow: auto;
  p {
    cursor: pointer;
    font-size: 14px;
  }
}
</style>
<style lang="scss">
.btnGroupAAUnit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .el-input-group__append {
    padding: 0 !important;
  }
}
</style>
